<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>幻灯片</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;

        }

        a {
            -webkit-tap-highlight-color: transparent;
        }

        img {
            border: none;
            vertical-align: top;
            width: 100%;
            height: auto;
        }

        .slider_container {
            width: 100%;
            height: 140px;
            background-color: blueviolet;

            position: relative;
            overflow: hidden;
        }

        .slider_image_container,
        .slider_image_item {
            width: 100%;
            height: 100%;
        }

        .slider_image_container {
            display: flex;
        }

        .slider_image_item {
            flex-shrink: 0;
        }

        .slider_index_container {
            position: absolute;
            width: 100%;
            bottom: 5px;
            /*border: 1px solid black;*/
            text-align: center;
        }

        .slider_index_item {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: #000;
            opacity: 0.2;
            border-radius: 50%;
            margin-right: 4px;
        }

        .slider_index_item_active {
            background-color: #007aff;
            border: 2px solid white;
            opacity: 1;
        }
    </style>
</head>

<body>
    <div id="slider" class="slider_container">
        <div class="slider_image_container">
            <div class="slider_image_item">
                <a href="###" class="slider_link">
                    <img src="./img/1.jpg">
                </a>
            </div>
            <div class="slider_image_item">
                <a href="###" class="slider_link">
                    <img src="./img/2.jpg">
                </a>
            </div>
            <div class="slider_image_item">
                <a href="###" class="slider_link">
                    <img src="./img/3.jpg">
                </a>
            </div>
            <div class="slider_image_item">
                <a href="###" class="slider_link">
                    <img src="./img/4.jpg">
                </a>
            </div>
            <div class="slider_image_item">
                <a href="###" class="slider_link">
                    <img src="./img/5.jpg">
                </a>
            </div>
            <div class="slider_image_item">
                <a href="###" class="slider_link">
                    <img src="./img/6.jpg">
                </a>
            </div>
        </div>
        <div class="slider_index_container">
            <span class="slider_index_item slider_index_item_active"></span>
            <span class="slider_index_item"></span>
            <span class="slider_index_item"></span>
            <span class="slider_index_item"></span>
            <span class="slider_index_item"></span>
            <span class="slider_index_item"></span>
        </div>
    </div>
    <button id="prev">prev</button>
    <button id="next">next</button>
    <script>
        /*Slider对象*/
        function Slider(el) {
            //获取需要的DOM元素
            this.el = el
            this.imageContainer = el.querySelector('.slider_image_container')
            this.imageItem = this.imageContainer.children
            //每次切换图片的宽度
            this.distancePerSlide = this.imageItem[0].offsetWidth
            //定义索引
            this.minIndex = 0
            this.maxIndex = this.imageItem.length - 1
            //初始值
            this.index = this._adjustIndex(0)
        }
        //切换到指定图片
        Slider.prototype.to = function (index) {
            this.index = index;

            this.index = this._adjustIndex(this.index)
            this._setIndicatorActive(this.index)
            this._setTransitionSpeed(300)
            this.move(this.getDistanceByIndex(this.index))
            //切换完成后，重置切换时间
            var self = this
            this.imageContainer.addEventListener('transitioned', function () {
                self._setTransitionSpeed(0)
            })
        }
        //切换到上一张
        Slider.prototype.prev = function () {
            this.to(this.index - 1)
        }
        //切换到下一张
        Slider.prototype.next = function () {
            this.to(this.index + 1)
        }
        //索引修正
        Slider.prototype._adjustIndex = function (index) {
            if (index < this.minIndex) {
                index = this.minIndex
            } else if (index > this.maxIndex) {
                index = this.maxIndex
            }
            return index
        }
        //设置切换速度
        Slider.prototype._setTransitionSpeed = function (speed) {
            this.imageContainer.style.transitionDuration = speed + 'ms'
        }
        //设置索引样式
        Slider.prototype._setIndicatorActive = function (index) {
            this.indicators = this.indicators || this.el.querySelectorAll('.slider_index_item')
            for (var i = 0; i < this.indicators.length; i++) {
                this.indicators[i].classList.remove('slider_index_item_active')
            }
            this.indicators[index].classList.add('slider_index_item_active')
        }
        //移动图片
        Slider.prototype.move = function (distance) {
            this.imageContainer.style.transform = 'translate3d(' + distance + 'px,0,0)'
        }
        //计算距离
        Slider.prototype.getDistanceByIndex = function (index) {
            return -index * this.distancePerSlide
        }
    </script>
    <script>
        var slider = new Slider(document.getElementById('slider'))
        document.getElementById('prev').addEventListener('click', function () {
            slider.prev()
        })
        document.getElementById('next').addEventListener('click', function () {
            slider.next()
        })
    </script>
</body>

</html>